<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>index</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="common/css/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- <link href="common/css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /> -->
</head>

<body>
  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div id="app">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <br /><br />
        <button type="button" class="btn btn-primary" onclick="app.getPageData()">查询</button>
        <table class="table table-bordered">
          <thead>
            <tr>
              <td>序号</td>
              <td>名称</td>
              <td>性别</td>
              <td>年龄</td>
              <td>入学日期</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p, index) in curPageData">
              <td class="">{{p.studentId}}</td>
              <td class="">{{p.studentName}}</td>
              <td class="">{{p.studentSex}}</td>
              <td class="">{{p.studentAge}}</td>
              <!-- <td class="">{{p.studentDate}}</td> -->
              <td class="">{{p.studentDateStr}}</td>
              <td class="">
                <a href="javascript:;" v-on:click="app.deleteData(p.studentId)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
        <!--分页导航条-->
        <div id="pagenav"></div>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>

  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        curPageData: []
      },
      methods: {
        getPageData: function () {
          $.ajax({
            url: "index",
            dataType: "json",
            type: "get",
            async: true,
            success: function (rs) {
              app.curPageData = rs;
            }
          });
        },
        deleteData: function (id) {
          $.ajax({
            url: "delete",
            data: { "studentId": id },
            dataType: "json",
            type: "get",
            async: true,
            success: function (rs) {
              if (rs > 0) {
                app.getPageData();
              }
            }
          });
        }
      }
    });
  </script>

</body>

</html>